<template>
  <div class="brand-content-box">
    <div class="brand-head-box activity-head-box" v-if="showBrand">
      <span class="smalltitle">品牌折扣</span>
      <span v-show="fielsStatus !== 2" class="text-time">{{timerText}}</span>
      <div class="acti_entry_timer" v-if="timerresult">
        <template v-if="dayNum > 0">
          <span class="week-time">{{timerresult.substr(0,1)}}</span>
          <span class="timer-text">天</span>
        </template>
        <template v-else>
        <span class="week-time">{{timerresult.substr(2,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(5,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(8,2)}}</span>
        </template>
      </div>
      <router-link :to="{path: '/BRAND_AREA'}" class="smallright">查看更多 ></router-link>
    </div>
    <div class="brand-box" v-if="showBrand">
      <div class="brand-item" v-for="(brand, index) in openedActList.brandVOS.slice(0, 1)" :key="index">
        <div class="brand-bgimg">
          <img src="../../images/brand_bg.jpg" alt="">
        </div>
        <div class="brand-tag"></div>
        <div class="brand-discount">
          降
          <span>?</span>
          个点
        </div>
        <div class="brand-name-img">
          <p class="brand-name">{{brand.name}}</p>
          <router-link tag="button" class="brand-more red-btn"
          :to="{path: '/BRAND_AREA'}"
          @click.native="setLog">查看全部商品></router-link>
        </div>

        <img class="brand-img-box" :src="prefixImg + brand.image" @error="catchErrorImage($event)"/>
      </div>
    </div>
  </div>
</template>

<script>
import { activityJoinLog } from '@/service/get-data'
import { mapActions, mapState } from 'vuex'
import { prefixImg } from '@/tool/index'
import { countDown } from '@/tool/tool'
export default {
  name: 'brandProduct',
  data () {
    return {
      loadImg: require('../../images/newload.png'),
      prefixImg,
      fielsStatus: 0,
      timerresult: '',
      // dayNum: 0,
      globalTimer: null,
      openedActList: null,
      actDate: '' // 活动日期
    }
  },
  computed: {
    ...mapState({
      activityId: state => state.activityId - 0,
      username: state => state.user.username
    }),
    dayNum () {
      return (this.timerresult && this.timerresult.substr(0, 1) - 0) || 0
    },
    showBrand () {
      return this.openedActList && this.openedActList.brandVOS && this.openedActList.brandVOS.length
    }
  },
  methods: {
    ...mapActions(['fetchBrandActivity']),
    catchErrorImage (e) {
      e.target.src = require('img/newload.png')
    },
    // 活动日志
    async setLog () {
      let text
      let fromRoute = this.$route.name
      fromRoute === 'Index' ? text = '主页进品牌' : text = '爆款专区进品牌'
      let res = await activityJoinLog(this.username, this.activityId, text)
      if (res.data.resultCode && res.data.resultCode === 2000) {
      } else {
        this.$message(res.data.resultMsg || '网络出错')
      }
    },
    priceNum (num) {
      num = String(num).split('.')
      if (num.length >= 2) {
        return [num[1][0], num[1][1]]
      } else if (num.length === 1) {
        return [num[1][0], '0']
      }
    },
    getBrandsProduct () {
      this.fetchBrandActivity().then(res => {
        this.openedActList = null
        this.openedActList = (res && res.voList[0]) || {}
        // 周周活动结束
        if (!('id' in this.openedActList)) {
          this.showActivity = false
          return
        }
        let _str = this.openedActList.startTime.split(' ')[0].split('-')
        this.$store.commit('BRANDID', this.openedActList.brandVOS[0]['id'])
        this.actDate = `${_str[1]}月${_str[2]}日品牌活动`
        let startTimeParm = this.openedActList.startTime
        let endTimeParm = this.openedActList.endTime
        const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
        const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动开始
        if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
          this.timerText = '距结束'
          this.fielsStatus = 1
          this.startCountFn(endTimeParm)
          return
        }
        // 周周活动还未开始
        if (nowTime < starTimeStamp) {
          this.timerText = '距开始'
          this.fielsStatus = 0
          this.startCountFn(startTimeParm)
        }
        // 周周活动结束
        if (nowTime > endTimeStamp) {
          this.timerText = '本场活动结束'
          this.fielsStatus = 2
        }
      })
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      let vm = this
      clearInterval(vm.globalTimer)
      vm.globalTimer = null
      vm.globalTimer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        // 剩余时间<=0
        if (vm.timerresult + '' === 'false') {
          clearInterval(vm.globalTimer)
          vm.globalTimer = null
          setTimeout(() => {
            vm.getBrandsProduct()
          }, 800)
        }
      }, 1000)
    }
  },
  mounted () {
    this.getBrandsProduct()
  },
  // activated () {
  //   console.log('品牌组件')
  //   this.getBrandsProduct()
  // },
  beforeRouteLeave () {
    clearInterval(this.globalTimer)
    this.globalTimer = null
  }
}
</script>

<style lang="scss" scoped>
.brand-content-box{
  margin-bottom: 20px;
}
.activity-head-box{
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  background: #c82515;
  padding: 0 20px;
  color: #fff;
  .smalltitle{
    font-size: 20px;
    padding-right: 20px;
  }
  .text-time{
    margin-right: 10px;
  }
  .discount-box{
    font-size: 18px;
    padding: 4px 16px;
    color: #FF0000;
    background: #ffffff;
    border-radius: 2px;
    line-height:28px;
  }
}
.brand-head-box{
  .smallright{
    float:right;
    // color:rgba(243,183,183,1);
    color: #fff;
    font-size:18px;
  }
}
.brand-box{
  position: relative;
  overflow: hidden;
  .brand-item{
    position: relative;
    float: left;
    width:100%;
    height: 200px;
    box-sizing: border-box;
    border-radius: 2px;
    text-align:center;
    font-size: 18px;
    // background-image: url("../../images/brand_bg.png");
    // background-repeat: no-repeat;
    // background-position: center;
  }
  
  .brand-tag{
    position: absolute;
    &:before{
      display: inline-block;
      content: '';
      border: 40px solid transparent;
      border-left: 41px solid #F5515F;
      border-top: 36px solid #F5515F;
    }
  }
  .brand-replace{
    background: #def8f3!important;
  }
  .brand-replace-img{
    height: 55px;
    vertical-align: middle;
    margin-bottom: 30px;
  }
  .brand-discount {
    position: absolute;
    transform: rotate(-46deg);
    width: 56px;
    text-align: center;
    top: 11px;
    left: -4px;
    color: #fff;
    font-size: 10px;
    span:nth-child(1){
    font-size: 22px;
    }
    .samll{
      font-size:10px;
      vertical-align: baseline;
    }
  }
  .brand-bgimg{
    position: absolute;
  }
  .brand-name-img{
    position: absolute;
    left: 375px;
    text-align: left;
    padding-top: 50px;
    padding-bottom: 23px;
    img{
      height: 67px;
      vertical-align: middle;
    }
  }
  .brand-img-box{
    position: absolute;
    top: 24px;
    right: 47px;
    height: 40px;
  }
  .brand-name{
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    letter-spacing: 3px;
    padding-bottom: 24px;
    font-size: 40px;
    line-height: 45px;
  }
  .brand-more {
    height: 42px;
    width: 180px;
    font-size: 16px;
    border:none;
    cursor: pointer;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    padding: 5px;
  }
  .red-btn{
    background: #e0080c;
  }
  .green-btn{
     background:#337a8a;
  }
  .brand-more-replace{
    border-radius:18px;
    width: auto;
    padding: 8px 30px;
    font-size: 14px;
    cursor: auto;
  }
}
// 倒计时
.acti_entry_timer{
  display:inline-block;
  position: absolute;
  line-height: 50px;
  .timer-text{
    color:#fff;
    line-height:53px;
    font-size:28px;
    vertical-align: middle;
  }
  .week-time{
    font-family: PingFangSC-Semibold, Microsoft YaHei;
    font-weight: 600;
    background: #ffffff;
    border-radius: 4px;
    width: 42px;
    height: 35px;
    display: inline-block;
    vertical-align: middle;
    color: #000;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 2px;
  }
  .week-colon {
    font-size: 20px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
  }
}
</style>
